<template>
  <div class="app-container">
    <div class="announcement-detail">
      <div class="announcement-header">
        <h1 class="title">{{ announcement.title }}</h1>
        <div class="meta">
          <span class="meta-item">
            <i class="el-icon-user"></i> 发布人: {{ announcement.publisherName }}
          </span>
          <span class="meta-item">
            <i class="el-icon-office-building"></i> 发布部门: {{ announcement.departmentName }}
          </span>
          <span class="meta-item">
            <i class="el-icon-time"></i> 发布时间: {{ announcement.publishTime | parseTime('{y}-{m}-{d} {h}:{i}') }}
          </span>
          <span class="meta-item">
            <i class="el-icon-view"></i> 阅读量: {{ announcement.readCount }}
          </span>
          <el-tag :type="announcement.type | typeFilter" class="meta-tag">{{ announcement.type | typeNameFilter }}</el-tag>
        </div>
      </div>
      
      <el-divider></el-divider>
      
      <div class="announcement-content" v-html="announcement.content"></div>
      
      <div v-if="attachments && attachments.length > 0" class="announcement-attachments">
        <h3>附件列表</h3>
        <ul class="attachment-list">
          <li v-for="item in attachments" :key="item.id" class="attachment-item">
            <i class="el-icon-document"></i>
            <a :href="getDownloadUrl(item.id)" target="_blank">{{ item.name }}</a>
            <span class="attachment-size">{{ formatFileSize(item.size) }}</span>
          </li>
        </ul>
      </div>
      
      <div class="announcement-feedback" v-if="!hasSubmittedFeedback">
        <h3>公告反馈</h3>
        <el-form :model="feedbackForm" :rules="feedbackRules" ref="feedbackForm" label-width="100px">
          <el-form-item label="评分" prop="rating">
            <el-rate v-model="feedbackForm.rating" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
          </el-form-item>
          <el-form-item label="评价" prop="comment">
            <el-input type="textarea" v-model="feedbackForm.comment" :rows="3" placeholder="请输入您对本公告的评价"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitFeedback">提交反馈</el-button>
          </el-form-item>
        </el-form>
      </div>
      
      <div class="announcement-feedback" v-else>
        <h3>您已提交反馈，感谢您的参与！</h3>
      </div>
    </div>
  </div>
</template>

<script>
import { getAnnouncementDetail, readAnnouncement } from '@/api/announcement/index'
import { getAttachmentList, getDownloadUrl } from '@/api/announcement/attachment'
import { submitFeedback, hasSubmittedFeedback } from '@/api/announcement/feedback'

export default {
  name: 'AnnouncementDetail',
  filters: {
    typeFilter(type) {
      const typeMap = {
        1: 'primary',
        2: 'success',
        3: 'warning'
      }
      return typeMap[type]
    },
    typeNameFilter(type) {
      const typeMap = {
        1: '通知',
        2: '通告',
        3: '提醒'
      }
      return typeMap[type]
    }
  },
  data() {
    return {
      announcement: {},
      attachments: [],
      hasSubmittedFeedback: false,
      feedbackForm: {
        announcementId: null,
        rating: 5,
        comment: ''
      },
      feedbackRules: {
        rating: [
          { required: true, message: '请选择评分', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      const id = this.$route.params.id
      
      // 获取公告详情
      getAnnouncementDetail(id).then(response => {
        this.announcement = response.data
        this.feedbackForm.announcementId = id
        
        // 标记为已读
        readAnnouncement(id)
      })
      
      // 获取附件列表
      getAttachmentList(id).then(response => {
        this.attachments = response.data
      })
      
      // 检查是否已提交反馈
      hasSubmittedFeedback(id).then(response => {
        this.hasSubmittedFeedback = response.data
      })
    },
    getDownloadUrl(id) {
      return getDownloadUrl(id)
    },
    formatFileSize(size) {
      if (size < 1024) {
        return size + ' B'
      } else if (size < 1024 * 1024) {
        return (size / 1024).toFixed(2) + ' KB'
      } else if (size < 1024 * 1024 * 1024) {
        return (size / (1024 * 1024)).toFixed(2) + ' MB'
      } else {
        return (size / (1024 * 1024 * 1024)).toFixed(2) + ' GB'
      }
    },
    submitFeedback() {
      this.$refs.feedbackForm.validate(valid => {
        if (valid) {
          submitFeedback(this.feedbackForm).then(() => {
            this.$message({
              message: '反馈提交成功',
              type: 'success'
            })
            this.hasSubmittedFeedback = true
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.announcement-detail {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.announcement-header {
  margin-bottom: 20px;
}
.title {
  margin-top: 0;
  margin-bottom: 15px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}
.meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  color: #666;
  font-size: 14px;
}
.meta-item {
  margin-right: 20px;
}
.meta-tag {
  margin-left: 10px;
}
.announcement-content {
  min-height: 200px;
  line-height: 1.8;
  margin-bottom: 30px;
}
.announcement-attachments {
  margin-top: 20px;
  margin-bottom: 30px;
}
.attachment-list {
  list-style: none;
  padding: 0;
}
.attachment-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.attachment-item:last-child {
  border-bottom: none;
}
.attachment-item a {
  margin-left: 10px;
  color: #409EFF;
  text-decoration: none;
}
.attachment-size {
  float: right;
  color: #999;
}
.announcement-feedback {
  margin-top: 30px;
}
</style> 